<!DOCTYPE html>
<html>
<head>
<script src='../../resources/js-test.js'></script>
<script>
description('Percentage margins on absolutely positioned replaced elements are relative to the container\'s logical width.');

window.onload = function() {
    var inners = document.querySelectorAll('.inner');
    for (var i = 0; i < inners.length; i++) {
        var inner = inners.item(i);
        var style = getComputedStyle(inner);
        shouldBe('"' + style.getPropertyValue('margin') + '"', '"10px 20px 30px 40px"');
    }
}
</script>
<style>
.outer {
    position: relative;
    width: 100px;
    height: 200px;
}
.inner {
    position: absolute;
    width: 40px;
    height: 160px;
    margin: 5% 10% 15% 20%;
}
.horizontal-tb {
    -webkit-writing-mode: horizontal-tb;
}
.horizontal-tb > .inner {
    margin: 10% 20% 30% 40%;
}
.vertical-lr {
    -webkit-writing-mode: vertical-lr;
}
.vertical-rl {
    -webkit-writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class='outer horizontal-tb'>
    <svg class='inner horizontal-tb'></svg>
</div>

<div class='outer horizontal-tb'>
    <svg class='inner vertical-lr'></svg>
</div>

<div class='outer horizontal-tb'>
    <svg class='inner vertical-rl'></svg>
</div>

<div class='outer vertical-lr'>
    <svg class='inner horizontal-tb'></svg>
</div>

<div class='outer vertical-lr'>
    <svg class='inner vertcial-lr'></svg>
</div>

<div class='outer vertical-lr'>
    <svg class='inner vertical-rl'></svg>
</div>

<div class='outer vertical-rl'>
    <svg class='inner horizontal-tb'></svg>
</div>

<div class='outer vertical-rl'>
    <svg class='inner vertical-lr'></svg>
</div>

<div class='outer vertical-rl'>
    <svg class='inner vertical-rl'></svg>
</div>
</body>
</html>
